<template>
  <!--客户信息-->
  <div class="client-index module-index">
    <order-module-title title="客户信息"/>
    <div class="client-body">
      <div class="body-item">
        <span style="color: red">*</span>
        用户名
      </div>
      <div class="body-item">
        <span style="color: red">*</span>
        公司名
      </div>
      <div class="body-item">
        <span style="color: red">*</span>
        联系人
      </div>
      <div class="body-item">
        <span style="color: red">*</span>
        联系电话
      </div>
      <el-input class="body-item" type="text" v-model="data.username"/>
      <el-input class="body-item" type="text" v-model="data.companyName"/>
      <el-input class="body-item" type="text" v-model="data.contact"/>
      <el-input class="body-item" type="text" v-model="data.phone"/>

      <div style="clear: both"></div>
    </div>
  </div>
</template>

<script>
import OrderModuleTitle from "@/components/order/component/OrderModuleTitle";
export default {
  name: "ClientInfo",
  components: {
    OrderModuleTitle,

  },
  props:{
    info: {}
  },
  data() {
    return {
      data:{
        username: '',
        companyName: '',
        contact: '',
        phone: '',
      }
    }
  },
  created() {
    this.init()
  },
  watch:{
    info: function (newValue,oldValue){
      if(newValue !== undefined){
        this.data = this.info
      }
    }
  },
  methods: {
    async init() {


    },
  }
}
</script>

<style scoped lang="scss">
.client-index {
  margin: 20px 0;


  .client-body {

    margin-top: 10px;
    width: 220 * 4 + 1px;
    max-width: 881px;
    text-align: center;
    border-top: 1px black solid;
    border-left: 1px black solid;

    .body-item {
      width: 220px;
      float: left;
      height: 42px;
      line-height: 42px;
      font-size: 15px;
      border-right: 1px black solid;
      border-bottom: 1px black solid;
    }

    .item-title {
      background-color: #B3C0D1;
    }

  }


}
</style>